<template>
  <div class="customer_group">
    <div class="nav">
      <Breadcrumb separator=">">
        <BreadcrumbItem to="/customerManagement/customerManagement-addcustomer">客户列表</BreadcrumbItem>
        <BreadcrumbItem to="/components/breadcrumb">XXXXX分组</BreadcrumbItem>
      </Breadcrumb>
    </div>
     <div class="customerlist">
     <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
        <div class="member">
          <Form-item label="昵称" prop="id">
            <Input v-model="formValidate.id" placeholder="请输入昵称" style="width:200px;"></Input>
          </Form-item>
          <Form-item label="收件人手机号" prop="PhoneNumber" :label-width="100">
              <Input v-model="formValidate.PhoneNumber" placeholder="请输入收件人手机号" style="width:200px;"></Input>
          </Form-item>
          <Form-item label="会员手机号" prop="memNumber" :label-width="90">
            <Input v-model="formValidate.memNumber" placeholder="请输入会员手机号" style="width:200px;"></Input>
          </Form-item>
          <Form-item label="微信昵称" prop="wxname">
             <Input v-model="formValidate.wxname" placeholder="请输入微信昵称" style="width:200px;"></Input>
          </Form-item>
        </div>
        <div class="date">
          <Form-item label="openid" prop="openid">
              <Input v-model="formValidate.wxname" placeholder="请输入openid" style="width:150px;"></Input>
          </Form-item>
          <Form-item label="入会渠道" prop="way">
              <Select v-model="formValidate.way" placeholder="请选择..." style="width:200px;">
                <Option value="network">网络</Option>
                <Option value="recommend">推荐</Option>
            </Select>
          </Form-item>
          <Form-item label="最后付款时间">
            <Row>
                <Col span="11">
                    <Date-picker type="date" placeholder="请输入开始时间" v-model="formValidate.paydate" style="width:100px;" size="small"></Date-picker>
                </Col>
                <Col span="2" style="text-align: center">~</Col>
                <Col span="11">
                    <Date-picker type="date" placeholder="请输入结束时间" v-model="formValidate.paytime" style="width:100px;" size="small"></Date-picker>
                </Col>
            </Row>
          </Form-item>
          <Form-item label="会员等级" prop="grade">
              <Select v-model="formValidate.grade" placeholder="请选择..." style="width:200px;">
                <Option value="VIP1">VIP1</Option>
                <Option value="VIP2">VIP2</Option>
            </Select>
          </Form-item>
        </div>
        <div class="jointime">
          <Form-item label="入会时间">
            <Row>
                <Col span="11">
                    <Date-picker type="date" placeholder="请输入开始时间" v-model="formValidate.joindate" style="width:150px;" size="small"></Date-picker>
                </Col>
                <Col span="2" style="text-align: center">~</Col>
                <Col span="11">
                    <Date-picker type="date" placeholder="请输入结束时间" v-model="formValidate.jointime" style="width:150px;" size="small"></Date-picker>
                </Col>
            </Row>
          </Form-item>
          <Form-item label="公众号关注时间" :label-width="100">
            <Row>
                <Col span="11">
                    <Date-picker type="date" placeholder="请输入开始时间" v-model="formValidate.Officialdate" style="width:200px;" size="small"></Date-picker>
                </Col>
                <Col span="2" style="text-align: center">~</Col>
                <Col span="11">
                    <Date-picker type="date" placeholder="请输入结束时间" v-model="formValidate.Officialtime" style="width:200px;" size="small"></Date-picker>
                </Col>
            </Row>
          </Form-item>
           <Form-item>
            <Button type="info" style="margin-left: 8px">查询</Button>
          </Form-item>
        </div>
      </Form>
   </div> 
   <div class="fetch_table">
    <Table border :columns="columns5" :data="data5"></Table>
   </div>
  </div>
</template>
<script>
 export default {
    name:'CustomerGroup',
    data () {
        return {
          formValidate: {
          id: "",
          PhoneNumber: "",
          memNumber: "",
          wxname: "",
          openid: "",
          way: "",
          paydate: "",
          paytime:"",
          grade:"",
          joindate:"",
          jointime:"",
          Officialdate:'',
          Officialtime:"",
      },
      ruleValidate: {
        id: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
        PhoneNumber: [
          { required: true, message: "收件人手机号不能为空", trigger: "blur" },
          { type: "number", message: "收件人手机号格式不正确", trigger: "blur" }
        ],
        memNumber: [
          { required: true, message: "会员手机号不能为空", trigger: "blur" },
          { type: "number", message: "会员手机号格式不正确", trigger: "blur" }
        ],
        wxname: [
          { required: true, message: "微信昵称不能为空", trigger: "blur" },
        ],
        openid: [
          { required: true, message: "openid不能为空", trigger: "blur" },
          { type: "number", message: "openid格式不正确", trigger: "blur" } 
        ],
        way: [
          { required: true, message: "请选择入会渠道", trigger: "blur" },
        ],
        paydate: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        paytime: [
          { required: true, message: "请输入结束时间", trigger: "change" }
        ],
        grade: [
          { required: true, type: "number", message: "请选择会员等级", trigger: "change" }
        ],
        joindate: [
          { required: true, message: "请选择入会开始时间", trigger: "change" }
        ],
        jointime: [
          { required: true, message: "请选择入会结束时间", trigger: "change" }
        ],
        Officialdate: [
          { required: true, message: "请选择公众号开始关注时间", trigger: "change" }
        ],
        Officialtime: [
          { required: true, message: "请选择公众号结束关注时间", trigger: "change" }
        ]  
      },
       columns5: [
            {
              title: '客户昵称',
              key: 'name',
              width: 120,
              align:'center'
            },
            {
                title: '会员等级',
                key: 'grade',
                width: 120,
                align:'center'
            },
            {
                title: '线下消费次数',
                key: 'underline',
                width: 120,
                align:'center'
            },
            {
              title: '是否粉丝',
              key: 'fans',
              width: 120,
              align:'center'
            },
            {
                title: '线上消费次数',
                key: 'online',
                width: 120,
                align:'center'
            },
            {
                title: '入会时间',
                key: 'jointimes',
                sortable: true,
                width: 150,
                align:'center'
            },
            {
                title: '操作',
                key: 'action',
                width: 400,
                align: 'center',
                render (row, column, index) {
                    return `<i-button type="error" size="small" >基础属性</i-button> 
                            <i-button type="error" size="small" >交易明细</i-button>
                            <i-button type="error" size="small" >积分流水</i-button>
                            <i-button type="error" size="small" >权益使用</i-button>
                            <i-button type="error" size="small" >更多信息</i-button>
                            <i-button type="error" size="small" >编辑</i-button>
                            `;
                }
            }
        ],
        data5: [
            {
                name: 'eva淘淘乐',
                grade: '黑罐',
                underline:'0',
                fans:'是',
                online:'1',
                jointimes: '2018-6-28',
            },
            {
                name: '王金宝0313',
                grade: '蓝罐',
                underline:'2',
                fans:'否',
                online:'10',
                jointimes: '2018-1-28',
            },
        ] 
     }
   }
 }
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.customer_group{
  @include container_global;
  .customerlist{
    width: 95%;
    height: 100%;
    padding: 3vw;
    background-color: #fff;
    .member,
    .jointime,
    .date {
      margin-top: 20px;
      @include display_global;
    }
  }
  .fetch_table{
    width: 95%;
    height: 10vh;
    margin-top: 10px;
    margin-bottom: 10vh;
  }
}
</style>
